<template>
  <div class="flight_item_wrap">
    <div
      class="flight_item_main"
      @click="show=!show"
    >
      <span class="duration">{{duration}}</span>
      <div class="flight_item_main_col1">
        <span>{{flight.airline_name}} {{flight.flight_no}} {{flight.plane_size}}</span>
      </div>
      <div class="flight_item_main_col2">
        <div class="flight_item_main_col2_time">{{flight.dep_time}}</div>
        <div class="flight_item_main_col2_airport">{{flight.org_airport_name}} {{flight.dst_airport_quay}}</div>
      </div>
      <div class="flight_item_main_col2">
        <div class="flight_item_main_col2_time">{{flight.arr_time}}</div>
        <div class="flight_item_main_col2_airport">{{flight.dst_airport_name}} {{flight.dst_airport_quay}}</div>
      </div>
      <div class="flight_item_main_col3">
        ￥<span>{{flight.base_price}}</span>起
      </div>

    </div>
    <div
      class="flight_item_list"
      v-show="show"
    >
      <span class="recommemd">低价推荐 </span>
      <div
        class="flight_group"
        v-for="(item,index) in flight.seat_infos"
        :key="index"
      >
        <div class="flight_item_seat"> <span>{{item.name}}</span> | {{item.supplierName}}</div>
        <div class="flight_item_price">￥{{item.par_price}}</div>
        <div class="flight_item_select">
          <el-button
            class="flight_item_btn"
            @click="submitAirOrder(flight.id,item.seat_xid)"
          >选定</el-button>
          <div>剩余:{{item.discount}}</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  props: ["flight"],

  computed: {
    duration() {
      // 起飞的时间戳
      const depTime = +new Date(this.flight.dep_datetime);
      // 到达的时间戳
      const arrTime = +new Date(this.flight.arr_datetime);

      // 两个时间的 时长 毫秒
      const dua_time = arrTime - depTime;
      // 先转为小时 3.2345345 h
      const hour = parseInt(dua_time / 1000 / 60 / 60);
      // 再分钟
      const minute = parseInt(dua_time / 1000 / 60 - hour * 60);
      return `${hour}小时${minute}分`;
    },
  },

  data() {
    return {
      show: false,
    };
  },
  methods: {
    // 点击 座位 选定按钮
    submitAirOrder(id, seat_xid) {
      // id 机票id  seat_xid 座位号id
      this.$router.push({ path: "/air/order", query: { id, seat_xid } });
    },
  },
};
</script>

<style lang="less" scoped>
.flight_item_wrap {
  border: 1px solid #ccc;
  margin: 10px 0;
  .flight_item_main {
    height: 80px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 14px;
    position: relative;
    .duration {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 13px;
      color: #666;
      padding-bottom: 15px;
      border-bottom: 1px solid #ccc;
    }

    .flight_item_main_col1 {
      span {
      }
    }

    .flight_item_main_col2 {
      text-align: center;
      .flight_item_main_col2_time {
        font-size: 22px;
        font-weight: 600;
      }

      .flight_item_main_col2_airport {
        color: #999;
      }
    }

    .flight_item_main_col3 {
      span {
        color: orange;
        font-size: 22px;
        font-weight: 600;
      }
    }
  }

  .flight_item_list {
    background-color: #f6f6f6;
    padding-left: 135px;
    position: relative;
    .recommemd {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 20px;
      font-size: 14px;
    }
    .flight_group {
      height: 75px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      &:last-child {
        border-bottom: none;
      }
      .flight_item_seat {
        font-size: 12px;
        width: 395px;
        span {
          color: green;
        }
      }

      .flight_item_price {
        color: orange;
        font-size: 20px;
        width: 100px;
      }

      .flight_item_select {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .flight_item_btn {
          width: 75px;
          height: 30px;
          background-color: orange;
          color: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        div {
          font-size: 12px;
          color: #666;
        }
      }
    }
  }
}
</style>